<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>补充1点击重新编辑</title>
    <style>
        #box{
            width: 500px;
            height: 250px;
            margin: 20px auto;
            text-align: center;
            border: 3px solid #acacac;
        }
        h1{
            color: #6c7f8d;
            position: relative;
            height: 50px;
            line-height: 50px;
            width: 100%;
        }
        h1::before{
            display: block;
            content: "";
            width: 30px;
            height: 30px;
            background: url(./images/pic.png)center center no-repeat;
            background-size: 100% 100%;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 150px;
        }
        .edit{
            width: 300px;
            height: 50px;
            line-height: 50px;
            border:5px solid #5792ae;
            margin: 50px auto;
        }
        .edit>input{
            border: none;
            outline: none;
            display: block;
            width: 280px;
            height: 48px;
            line-height: 50px;
            text-align: center;
            color: #8d8d8f;
            font-size: 20px;
        }
    </style>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="box">
        <h1>{{msg}}</h1>
        <div class="edit"><input type="text" v-model="msg"></div>
    </div>
    <script>
        var vm = new Vue({
            el: "#box",
            data: {
                msg: "Edit Me"
            }
        })
    </script>
</body>

</html>